import { Component, lazy, Suspense } from "react";
import { Routes, Route } from "react-router-dom";
const Home = lazy(() => import("../components/Home/Home"));
const Course = lazy(() => import("../components/Course/Course"));
const OnlineSchool = lazy(() =>
  import("../components/OnlineSchool/OnlineSchool")
);
const BigTouch = lazy(() => import("../components/BigTouch/BigTouch"));
const Community = lazy(() => import("../components/Community/Community"));
let routes = [
  {
    path: "/",
    component: <Home></Home>,
    name: "home",
  },
  {
    path: "/Course",
    component: <Course></Course>,
    name: "course",
  },
  {
    path: "/OnlineSchool",
    component: <OnlineSchool></OnlineSchool>,
    name: "onlineschool",
  },
  {
    path: "/BigTouch",
    component: <BigTouch></BigTouch>,
    name: "bigtouch",
  },
  {
    path: "/Community",
    component: <Community></Community>,
    name: "community",
  },
];

class RouterMap extends Component {
  render() {
    return (
      <Suspense fallback={<div>loading...</div>}>
        <Routes>
          {routes.map((route) => (
            <Route
              key={route.name}
              path={route.path}
              element={route.component}
            ></Route>
          ))}
        </Routes>
      </Suspense>
    );
  }
}

export default RouterMap;
